<template>
  <div style="width: 100%">
    <el-card class="box-card" v-for="(item,index) in this.$store.state.cart.item_list" :key="index" >
      <div slot="header" class="clearfix" >
        <span><i class="el-icon-s-shop"></i>{{item.store_name}}</span>
        <template>
          <el-checkbox-group v-model="item_id_list" @change="handleCheckedListChange">
            <el-checkbox :label="item.item_id" :disabled="!item.sale_state"></el-checkbox>
          </el-checkbox-group>
        </template>
      </div>
      <el-row :gutter="20">
        <el-col :span="3"><el-image :src="item.item_picture" style="width:96px;height:96px"></el-image></el-col>
        <el-col :span="18" class="cart_item_details">
          <div>商品：{{ item.item_name }}</div>
          <div>单价：￥{{ item.item_price }}</div>
          <div v-if="item.sale_state">状态：在售</div>
          <div v-if="!item.sale_state">状态：商品已下架</div>
        </el-col>
      </el-row>
    </el-card>
</div>

</template>


<script>
export default {
  name: "cart_card",
  data(){
    return{
      item_list:[],
      item_id_list:[],
      checkAll: false,
      // cities: cityOptions,
      isIndeterminate: true

    }
  },
  methods:{
    handleCheckedListChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.item_list.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.item_list.length;
      this.$store.state.cart.item_id_list = this.item_id_list;
    }

  },
  created() {
    console.log(this.$store.state.cart.item_list)


  }
}
</script>

<style scoped>
.el-card{
  margin:20px;
}
.cart_item_details{
  letter-spacing: 0.5px;
  /*font-weight: bold;*/
}
.cart_item_details div{
  margin-bottom: 1%;
}

</style>
